// pages/poster/poster.js
// const wxml2canvas = require('../../utils/wxml2canvas.js')
import Poster from '../../miniprogram_dist/poster/poster';
import http from "../../utils/http.js"
const app = getApp()
let poster = null
let posterConfig= {}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    posterConfig:{},
    avatar: "",
    backgroundImage: "",
    drinkQuantity: "",
    drinkTimes: "",
    joinDays: "",
    logo: "",
    mpQrCode: "",
    nickname: ""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getInfo()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    poster = null
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: app.globalData.shareTitle,
      path: '/pages/index/index'
    }
  },
  getInfo(){
    http.request("/home/poster")
    .then(res=>{
      let avatar = res.data.avatar
      let backgroundImage = res.data.backgroundImage
      let drinkQuantity = res.data.drinkQuantity
      let drinkTimes = res.data.drinkTimes
      let joinDays = res.data.joinDays
      let logo = res.data.logo
      let mpQrCode = res.data.mpQrCode
      let nickname = res.data.nickname

      this.setData({
        avatar,
        backgroundImage,
        drinkQuantity,
        drinkTimes,
        joinDays,
        logo,
        mpQrCode,
        nickname
      })
      
      posterConfig = {
        width: 750,
        height: 1334,
        backgroundColor: '#fff',
        debug: false,
        pixelRatio: app.globalData.pixelRatio,
        blocks: [
          {
            width: 670,
            height: 380,
            x: 40,
            y: 882,
            borderRadius: 32,
            zIndex: 100,
            backgroundColor: '#fff',
          },
        ],
        texts: [
          {
            x: 190,
            y: 924,
            baseLine: 'middle',
            text: nickname,
            fontSize: 32,
            color: '#1A1A1A',
            zIndex: 101
          },
          {
            x: 190,
            y: 974,
            baseLine: 'middle',
            text: [{
              text: '我已经加入天地精华',
              fontSize: 26,
              color: '#999999',
            }, {
                text: joinDays+"",
                fontSize: 26,
                color: '#1A1A1A',
                marginLeft: 8
            },
            {
              text: '天',
              fontSize: 26,
              color: '#999999',
              marginLeft: 8
            }
            ],
            zIndex: 101
          },
          {
            x: 80,
            y: 1128,
            baseLine: 'middle',
            text: [{
              text: '饮水总次数',
              fontSize: 24,
              color: '#999999',
            },
            {
              text: '饮水总量',
              fontSize: 24,
              color: '#999999',
              marginLeft: 60
            }
            ],
            zIndex: 101
          },
          {
            x: 80,
            y: 1184,
            baseLine: 'middle',
            text: [{
              text: drinkTimes+"",
              fontSize: 48,
              color: '#FDD103',
            },
            {
              text: '次',
              fontSize: 36,
              color: '#1A1A1A',
              marginLeft: 8
            }
            ],
            zIndex: 101
          },
          {
            x: 260,
            y: 1184,
            baseLine: 'middle',
            text: [
              {
                text: drinkQuantity+"",
                fontSize: 48,
                color: '#FDD103'
              },
              {
                text: 'ml',
                fontSize: 36,
                color: '#1A1A1A',
                marginLeft: 8
              }
            ],
            zIndex: 101
          }
        ],
        images: [
          {
            width: 750,
            height: 1334,
            x: 0,
            y: 0,
            url: backgroundImage,
          },
          {
            width: 80,
            height: 80,
            x: 80,
            y: 922,
            borderRadius: 40,
            url: avatar,
            zIndex: 101
          },
          {
            width: 140,
            height: 140,
            x: 530,
            y: 1074,
            borderRadius: 70,
            url: mpQrCode,
            zIndex: 101
          }
        ]
      }
    })
    .catch(res=>{

    })
  },
  drawCanvas: function() {
    const wrapperId = '#wrapper'
    const drawClassName = '.canvas-draw'
    const canvasId = 'canvas-poster'
    
    wxml2canvas(wrapperId, drawClassName, canvasId).then(() => {
      // canvas has been drawn here, you can save the canvas image with wx.canvasToTempFilePath 
      wx.canvasToTempFilePath({
        x: 100,
        y: 200,
        width: 50,
        height: 50,
        destWidth: 100,
        destHeight: 100,
        canvasId: 'myCanvas',
        success(res) {
          console.log(res.tempFilePath)
        }
      })
    })
  },
  getData(){
    if(poster){
      wx.previewImage({
        current: poster,
        urls: [poster]
      })
      return
    }
    this.setData({ posterConfig: posterConfig }, () => {
      Poster.create(true);    // 入参：true为抹掉重新生成 
    });
  },
  onPosterSuccess(e) {
    const { detail } = e;
    poster = detail
    wx.previewImage({
        current: detail,
        urls: [detail]
    })
},
})